<template>
  <div id="panel">
    <template>
      <!-- 搜索表单卡片 -->
      <el-card class="queryForm">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          :label-position="'right'"
        >
          <!-- 日期选择器 -->
          <el-form-item label="选择日期：" prop="day">
            <el-date-picker
              v-model="queryParams.day"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <!-- 操作按钮组 -->
          <el-form-item label="">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              style="padding: 10px"
            >
              查询
            </el-button>
            <!-- 重置按钮（恢复注释，保持功能完整） -->
            <el-button
              @click="resetQuery"
              style="padding: 10px; margin-left: 8px"
            >
              <i class="iconfont icon-saoba"></i>
              重置
            </el-button>
            <el-button
              type="primary"
              @click="handleExport"
              style="padding: 10px; margin-left: 8px"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 表格内容卡片 -->
      <el-card class="pageContent">
        <!-- 表格：绑定合并方法 + 边框（优化合并视觉效果） -->
        <el-table
          id="selectTable"
          :data="tableList.rows"
          stripe
          :height="tableHeight"
          v-loading="loading"
          :span-method="objectSpanMethod"
          border
          :cell-style="cellStyle"
        >
          <!-- 动态渲染表头 -->
          <el-table-column
            v-for="(column, index) in columns"
            :key="index"
            :prop="column.prop"
            :label="column.label"
            align="center"
            :min-width="100"
          ></el-table-column>
        </el-table>
      </el-card>
    </template>
  </div>
</template>

<script>
// 导入依赖工具
import tableToExcel from "@/utils/tableToExcel";
import getTime from "@/utils/getTime.js";
import { getDayReport } from "@/api/drinkingwatersource.js";

export default {
  name: "HydrologicStation",
  // 接收父组件传递的树节点ID
  props: ["selTreeId"],
  components: {},
  computed: {},
  data() {
    return {
      // 表格高度（自适应窗口）
      tableHeight: window.innerHeight - 350,
      options: [],
      basinOptions: [],
      regionList: [],
      lakeList: [],
      // 表格加载状态
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        day: "", // 日期参数
      },
      // 表格数据（rows：列表数据，total：总数）
      tableList: {
        total: 0,
        rows: [],
      },
      // 动态表头配置
      columns: [],
      // 延迟请求定时器（避免重复请求）
      requestTimer: null,
    };
  },
  // 监听树节点ID变化，触发数据刷新
  watch: {
    selTreeId: {
      handler(newVal) {
        if (newVal) {
          // 有ID时立即请求数据
          this.getList();
          // 清除残留定时器
          if (this.requestTimer) {
            clearTimeout(this.requestTimer);
          }
        } else {
          // 无ID时延迟重试（1秒间隔）
          this.delayRequest();
        }
      },
      deep: true, // 深度监听（应对ID为复杂类型的情况）
    },
    // 监听窗口大小变化，自适应表格高度
    "window.innerHeight": {
      handler() {
        this.tableHeight = window.innerHeight - 480;
      },
      immediate: false,
    },
  },
  // 组件创建时初始化日期（默认当前日期）
  created() {
    this.queryParams.day = getTime.getNowDate();
    // 绑定窗口大小变化事件
    window.addEventListener("resize", () => {
      this.tableHeight = window.innerHeight - 480;
    });
  },
  // 组件销毁时清除定时器和事件监听
  beforeDestroy() {
    if (this.requestTimer) {
      clearTimeout(this.requestTimer);
    }
    window.removeEventListener("resize", () => {
      this.tableHeight = window.innerHeight - 480;
    });
  },
  methods: {
    /**
     * 核心：单元格合并方法（实现整体水质、超标项横向合并）
     * @param {Object} param0 - 表格单元格参数（row：当前行数据，columnIndex：列索引）
     * @returns {Object} 合并配置（rowspan：行合并数，colspan：列合并数）
     */
    objectSpanMethod({ row, columnIndex }) {
      // 总列数 = 动态表头长度（确保合并范围适配表头）
      const totalColumnCount = this.columns.length;
      // 合并列数 = 总列数 - 1（排除第1列，从第2列合并到最后一列）
      const mergeColumnCount = totalColumnCount - 1;

      // 1. 处理“整体水质”行
      if (row?.column1 === "整体水质") {
        if (columnIndex === 0) {
          // 第1列：显示“整体水质”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏（被合并覆盖，避免重复显示）
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 2. 处理“超标项”行
      if (row?.column1 === "超标项") {
        if (columnIndex === 0) {
          // 第1列：显示“超标项”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 3. 其他行：不合并
      return { rowspan: 1, colspan: 1 };
    },

    /**
     * 单元格样式（优化合并行视觉效果）
     * @param {Object} param0 - 单元格参数
     * @returns {Object} 样式配置
     */
    cellStyle({ row }) {
      // 合并行（整体水质/超标项）添加背景色，突出显示
      if (row?.column1 === "整体水质" || row?.column1 === "超标项") {
        return {
          backgroundColor: "#f0f7ff", // 淡蓝色背景
          fontWeight: "500", // 字体加粗
        };
      }
      return {};
    },

    /**
     * 延迟请求方法（无树ID时重试）
     */
    delayRequest() {
      // 清除之前的定时器，避免重复创建
      if (this.requestTimer) {
        clearTimeout(this.requestTimer);
      }
      // 1秒后重新检查树ID
      this.requestTimer = setTimeout(() => {
        if (this.selTreeId) {
          this.getList();
        } else {
          // 仍无ID则继续重试
          this.delayRequest();
        }
      }, 1000);
    },

    /**
     * 页面初始化请求数据
     */
    pageInit() {
      this.getList();
    },

    /**
     * 分页：每页条数变化
     * @param {Number} val - 新的每页条数
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },

    /**
     * 分页：当前页变化
     * @param {Number} val - 新的当前页
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },

    /**
     * 搜索：触发查询
     */
    handleQuery() {
      // 重置为第1页
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 重置：清空查询表单
     */
    resetQuery() {
      // 重置日期为当前日期
      this.queryParams.day = getTime.getNowDate();
      // 重置表单验证状态
      this.$refs.queryForm?.resetFields();
      // 重置后重新查询
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 导出：表格数据导出为Excel
     */
    handleExport() {
      // 调用工具类导出，文件名：监测数据日报
      tableToExcel.getExcel("#selectTable", "监测数据日报");
    },

    /**
     * 核心：获取表格数据（调用接口）
     */
    getList() {
      // 构建查询参数（仅传递必要字段）
      const query = {
        day: this.queryParams.day,
        id: this.selTreeId,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };

      // 显示加载状态
      this.loading = true;

      // 调用接口获取数据
      getDayReport(query)
        .then((res) => {
          // 接口成功：更新表格数据和表头
          const responseData = res.data || {};
          this.tableList.total = res.total || 0;
          this.tableList.rows = responseData.tableData || [];
          this.columns = responseData.tableOp || [];
        })
        .catch((err) => {
          // 接口失败：提示错误
          console.error("获取水质日报数据失败：", err);
          this.$message.error("数据加载失败，请重试");
        })
        .finally(() => {
          // 无论成功/失败，关闭加载状态
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 基础样式重置 */
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

/* 面板容器样式 */
#panel {
  padding-bottom: 0px;
  min-height: calc(100% - 20px);
  margin: 0;

  /* 分页组件样式 */
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    /* 总数文本样式 */
    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  /* 分页刷新按钮样式 */
  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
    &:hover {
      color: #409eff;
    }
  }

  /* 卡片通用样式 */
  .el-card {
    margin: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }

  /* 搜索表单卡片样式 */
  .queryForm {
    .el-card__body {
      padding: 16px 20px !important;
    }

    .el-form-item {
      margin: 10px 0 10px 10px;
      align-items: center;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
      font-weight: 500;
    }

    .el-form-item__content {
      min-width: 200px;
    }

    /* 日期选择器宽度 */
    .el-date-editor {
      width: 100%;
    }
  }

  /* 表格内容卡片样式 */
  .pageContent {
    .el-table {
      width: 100%;

      /* 表头样式优化 */
      .el-table__header th {
        background-color: #f5f7fa;
        font-weight: 500;
        color: #333;
      }

      /* 合并单元格边框优化（避免重复边框） */
      .el-table__cell.colspan-0 {
        border: none !important;
      }
    }

    /* 标签页样式（若后续启用标签页可保留） */
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  /* 特殊表单项样式 */
  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}

/* 标题栏样式（若后续添加标题可保留） */
.titleBox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe4ed;
  margin: 0 20px 20px 20px;
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background: #307eff;
  }

  .title {
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 10px;
    font-weight: 500;
  }

  .more {
    font-size: 16px;
    color: #999;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
</style>
